<template>
    <div id="app">
        <div class="address_list" @click="showAddressPop">
            <p>地址: </p>
            <p>{{province}} {{city}} {{town}}</p>
            <address-linkage
                :province="province"
                :city="city"
                :town="town"
                v-if="openPopFlag"
                @getAddressData="getAddressData"
            >
            </address-linkage>
        </div>
    </div>
</template>

<script>
    import addressLinkage from '@/components/addressLinkage/index'
    export default {
        name: "App",
        data() {
            return {
                province: '重庆',
                city: '重庆',
                town: '其它区',
                openPopFlag: false
            }
        },
        methods: {
            // 三级联动组件getAddressData方法返回一个对象obj
            // obj对象包含的属性
            // province 省
            // city 市
            // town 镇
            // openPopFlag 关闭弹窗标识为false
            getAddressData(obj) {
                // console.log('获取子组件地址')
                this.province = obj.province
                this.city = obj.city
                this.town = obj.town
                this.openPopFlag = obj.openPopFlag
            },
            // 显示地址弹窗
            showAddressPop() {
                this.openPopFlag = true
            }
        },
        components: {
            addressLinkage
        }
    }

</script>

<style>
    .address_list {
        display: flex;
        height: 50px;
        border-bottom: 1px solid #eee;
    }

    p:nth-of-type(1) {
        margin-right: 10px;
    }

</style>
